<template>
    <van-card v-for="user in userList"

              :desc="user.profile"
            :title="`${user.username}`"
            :thumb="user.avatarUrl"
    >


        <template #tags>
            <van-tag plain type="danger" v-for="tag in user.tags" style="margin-right: 8px; margin-top: 8px; color: deepskyblue; border: 1px solid deepskyblue; border-radius: 20px; padding: 4px 12px;">
                {{ tag }}
            </van-tag>
        </template>
        <template #footer>
            <van-button
                size="mini"
                style="border-radius: 15px; border: 1px solid #007bff; background-color: transparent; color: #007bff; transition: all 0.3s ease;"
                @click="doChatOne(user)"
            >
                私信
            </van-button>
        </template>
    </van-card>
</template>

<script setup lang="ts">
import {UserType} from "../models/user";
import {computed,reactive,ref,onMounted} from 'vue';
import { useRouter } from 'vue-router';
import { useCache } from "../hooks/useCache";
import {useAppStoreWithOut} from '../store/modules/app';
interface userCardList{
    userList: UserType[];
}
const props = defineProps<userCardList>();
// ------------------------------------------------
const router = useRouter();

let chatUsersList = reactive([]);//有过聊天的用户列表
const {wsCache} = useCache();
const appStore = useAppStoreWithOut();

const doChatOne = (user) => {
    chatUsersList = wsCache.get(appStore.getChatUsersList);
    //判断该用户是否已经在列表中，有则移到第一位，没有则添加到第一位
    if(chatUsersList == null || chatUsersList.length == 0) {
        chatUsersList = [];
        chatUsersList.push(user);
    }
    if(chatUsersList.some(chatUser => chatUser.userAccount == user.userAccount)) {
        chatUsersList = chatUsersList.filter(item => item.userAccount != user.userAccount);
        chatUsersList.unshift(user);
    }else {
        chatUsersList.unshift(user);
    }
    wsCache.set(appStore.getChatUsersList, chatUsersList);
    //切换当前选中用户
    // store.commit('changeCurrentSession', user);
    // window.sessionStorage.setItem('currentSession', JSON.stringify(user));
    wsCache.set(appStore.getCurrentSessionToUser, user);
    router.push('/chatPerson');
}


</script>


<style scoped>
.van-card {
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.van-button:hover {
    background-color: #007bff;
    color: white;
}
</style>